<template>
    <view>
        <view class="row">
        <!--基本信息-->

            <view class="mod mod-base mod-tit">
                <view class="bd">
                    <view class="name-price-wrap">
                        <view class="name">
                            <h3>
                                地铁万科杭行道
                                <!--安全购-->
                            </h3>
                            <view class="tag-aqg">
                                    <!-- <img src="@/static/img00/safety.png" alt="安全购" /> -->
                            </view>
                        </view>

                        <view class="lb-area new-lb-area">
                            <span class="new-lbs new-lbs-yt">公寓</span>
                            <span class="new-lbs new-lbs-in"  v-for="(item,index) in span " :key="index">
                                {{ item.list }}
                            </span>

                        </view>
                    </view>
                </view>
            </view>

            <view class="mod mod-base mod-base1">
                <view class="bd">
                    <ul class="base-info">
                        <li class="price-current">
                            <view class="price-wrap">参考单价：<span>26,000元/m² </span></view>
                        </li>
                        <li class="price-history">参考总价：<span>65万元起万元</span></li>

                        <li>建筑面积：<span>25-54㎡</span></li>

                        <li>开盘时间：<span>2019-09-26</span></li>

                        <li class="address">
                            <view class="th">楼盘地址：</view>
                            <view class="td">
                                <span class="house-zone"> 余杭区</span>余杭 - 杭行路与祥运路交叉口地铁10号线（建设中）祥园路站
                            </view>
                        </li>
                    </ul>

                    <view class="link-more" @click="details()">
                        <a>查看楼盘详细信息</a>
                    </view>

                <!--榜单展示-->
                        <view class="ranking-entrance">
                            <view class="pic">
                                <!-- <img src="@/static/img00/huo.png" alt="" /> -->
                            </view>

                           

                            <view class="right">
                                <!-- <img src="@/static/img00/icon_right.png" alt=""> -->
                            </view>

                             <p>余杭区热销楼盘榜</p>

                        </view>



                    <ul class="link-area">
                        <li class="left">
                            <!-- <img  src="@/static/img00/ic_ price.png" alt="">  -->
                            <span>获取变价通知</span> 
                        </li>

                        <li class="right">
                            <!-- <img  src="@/static/img00/notice.png" alt=""> -->
                            <span>获取开盘通知</span> 
                        </li>
                    </ul>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {

        span: [
            { list: "幼儿园" },
            { list: "紧凑实用" },
        ],

    };
  },
  methods: {
        details(){
		    // this.$common.navigateTo("../xqtab/Xqtab");
            this.$common.navigateTo("/pages/index/xqtab/Xqtab")
	    },

  },
};
</script>


<style scoped>
    *{
       margin: 0;
       padding: 0;
       list-style: none; 
    }
    .row{
        /* height: 45rem; */
        background: #fff;

    }

    .mod{
        /* margin: 0 40upx; */
    }
    .mod-tit{
        height: 140upx;
        padding: 30upx 0 0 ;
    }
    .bd{
        height: 108upx;
        margin: 0 40upx;   
    }


    .name{
        height: 60upx;
        width:  560upx
    }
    h3{
        font-size: 44upx;
        float: left;
    }
    .tag-aqg>img{
        width: 96upx;
        height: 36upx;
        float: left;
        margin-top: 14upx;
        margin-left: 20upx;
    }
    .lb-area{
        height: 44upx;
        width: 600upx;
        margin-top: 15upx;
        
    }
    .new-lbs{
        margin-right: 20upx;
        padding: 4upx 6upx;
    }
    .new-lbs-yt{
        border: 1px solid #13c3c3;
        color:#13c3c3;
        border-radius: 6upx;
    }
    .new-lbs-in{
        background: #f3f6f9;
        color: #13c3c3;
       
    }
    .price-current{
        height: 48upx;
        line-height: 48upx;
        margin-top: 20upx;
    }
    .base-info>li{
         color: #77808a;
         margin-top: 20upx;
    }

     .base-info>li>span{
         color: #3e4a59;
     }

    .price-wrap>span{
         color: #ff5c47;
         font-size: 38upx;
         font-weight: 550;
    }
    .price-history>span{
        color: #3e4a59;
        font-size: 32upx;
        font-weight: 550;
    }
    .th{
        float: left;
    }
    .td{
        color: #3e4a59;
        display: -webkit-box;    
        -webkit-box-orient: vertical;    
        -webkit-line-clamp: 2;    
        overflow: hidden;
    }
    .td>span{
        margin-right: 20upx;
    }

    .link-more{
        margin-top: 60upx;
        text-align: center;
        color: #13c3c3;
    }
    .ranking-entrance{
        height: 92upx;
        margin-top:40upx;
        border-top:1px solid #F2F2F2;
        border-bottom: 1px solid #F2F2F2 ;
        line-height: 92upx;
    }
    .pic>img{
        height: 40upx;
        width: 40upx;
        margin-right: 20upx;
        margin-top: 26upx;
    }
    .pic{
        float: left;
   
    }
    .pic>p{
        float: left;
    }
    .right{
        float: right;
    }
    .right>img{
        height: 40upx;
        width: 40upx;
        margin-top: 26upx;
    }

    .link-area{
        height: 90upx;
        margin-top: 40upx;
    }
    .link-area>li{
        height: 100%;
        width: 300upx;
        float: left;

        background: #f3f6f9;
        /* text-align: center; */
        line-height: 90upx;
        font-size: 28upx;
        font-weight: 550;
        color: #13c3c3;
        border-radius: 10upx;
    }
     .link-area>li>img{
         height: 40upx;
         width: 40upx;
         float: left;
         margin-top: 26upx;
         margin-left: 30upx;
     }
     .link-area>li>span{
         margin-left: 10upx;
     }
    .right{
        margin-left: 60upx;
    }

</style>
